<script setup lang="ts">
import { ElTableColumn, TableColumnCtx } from 'element-plus';
import { toRefs } from 'vue';

import { ITableColumn } from '@/types';

const prop = defineProps<{
  item: ITableColumn;
  columuConfig?: Partial<TableColumnCtx<any>>;
  cellDefaultValue?: any;
}>();
const { item } = toRefs(prop);
</script>

<template>
  <el-table-column
    v-if="!(item.hideColumu ?? false)"
    :show-overflow-tooltip="true"
    :formatter="(row, column, cellValue) => cellValue?.toString?.() || prop.cellDefaultValue"
    v-bind="{ ...columuConfig, ...item }"
  >
    <template v-if="item.childHead" #default>
      <template v-for="e in item.childHead" :key="e.prop">
        <TableColumnChild :item="e" :columu-config="columuConfig" />
      </template>
    </template>
  </el-table-column>
</template>

<style scoped lang="scss"></style>
